<template>
  <v-button-group :type="type">
    <v-button
      v-for="(index, btn) in tabBtn"
      :href="btn.href"
      :class="btn.status"
      :shape="shape"
      @click="doOnClick(index)"
      class-name="tab-link">
      {{btn.title}}
    </v-button>
  </v-button-group>
  <div class="tabs">
    <slot></slot>
  </div>
</template>

<script>
import VButtonGroup from './ButtonGroup'
import VButton from './Button'

export default {
  props: {
    type: {
      type: String,
      require: true
    },
    shape: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      tabBtn: []
    }
  },
  events: {
    setTabBtn (data) {
      this.tabBtn.push(data)
    }
  },
  methods: {
    doOnClick (index) {
      this.$emit('tabchange', index)
    }
  },
  components: {
    VButton,
    VButtonGroup
  }
}
</script>
